<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/css/zui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/lib/jquery/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/js/zui.min.js"></script>
</head>
	<style>
	body{
	text-align: center;
	}
	.login-box{
		width:520px;
		height:450px;
		position: absolute;
		left:35%;
		top:25%;
		border:1px solid #CFCFCF;
		border-radius: 36px;
		
	}
	.login-box:HOVER {
		background: #FCFCFC;
	}
	 body:HOVER {
		background:#A3A3A3;
	} 
	</style>
<body>
<div class="login-box" id="rrapp" v-cloak>
  <div class="login-logo">
    <p><font size="8">登录</font></p>
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
  	  <br>
      <div class="form-group has-feedback">
        <input type="text" class="form-control" v-model="name" placeholder="账号">
        <span class="glyphicon glyphicon-user form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" class="form-control" v-model="password" placeholder="密码">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="text" class="form-control" v-model="captchaCode" @keyup.enter="login" placeholder="验证码">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <img alt="如果看不清楚，请单击图片刷新！" class="pointer" :src="src" @click="refreshCode">
        &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" @click="refreshCode">点击刷新</a>
      </div>
       <div v-if="error" class="alert alert-danger alert-dismissible">
        <h4 style="margin-bottom: 0px;"><i class="fa fa-exclamation-triangle"></i> {{errorMsg}}</h4>
      </div>
       <div class="form-group has-feedback">
          <button type="button" class="btn btn-primary btn-block btn-flat" @click="login">登录</button>
        </div>
      </div>
  </div>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:'#rrapp',
		data:{
			name: '',
			password: '',
			captchaCode: '',
			error: false,
			errorMsg: '',
			src: 'user/getCaptchaCode'
		},
		beforeCreate: function(){
			if(self != top){
				top.location.href = self.location.href;
			}
		},
		methods: {
			refreshCode: function(){
				this.src = "user/getCaptchaCode?t=" + $.now();
			},
			login: function () {
				var data = "name="+vm.name+"&password="+vm.password+"&captchaCode="+vm.captchaCode;
				$.ajax({
					type: "GET",
				    url: "user/submit",
				    data: data,
				    dataType: "json",
				    success: function(result){
						if(result.code == 0){
							//登录成功
							parent.location.href ='user/page';
						}else{
							vm.error = true;
							vm.errorMsg = result.msg;
							vm.refreshCode();
						}
					}
				});
			}
		}
	});
</script>
	
</body>

</html>